<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<image class="header-bg" src="@/my/static/beijing.png"></image>
				<view class="header">
					<view class="name">帮助中心</view>
					<view class="date">SUPPORT CENTER</view>
				</view>

				<view class="card menu-1" @click="goPage('/commonPage/protocol/protocol',{title:'帮助中心',id:item.id })"
					v-for="(item,index) in dataList">
					<view class="text1 text-ellipsis">{{ item.title }}</view>
					<view class="text2 text-ellipsis">{{ getInfoStr(item.info) }}</view>
				</view>

			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import useDataLoad from "@/hooks/useDataLoad";
	import { getHelpList } from "@/api/index";
	import useRouter from '@/hooks/useRouter.ts';
	export default defineComponent({
		name: '',
		setup(props, ctx) {
			const router = useRouter();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const dataLoad = useDataLoad(getHelpList);
			const getInfoStr = (info : string) => {
				/* 去除富文本中的html标签 */
				/* *、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。*/
				let content = info.replace(/<.+?>/g, '');

				/* 去除&nbsp; */
				content = content.replace(/&nbsp;/ig, '');

				/* 去除空格 */
				content = content.replace(/\s/ig, '');
				return content
			};
			const goPage = (url, params) => {
				if (!url) {
					uni.$wdToast.error("暂未开放")
					return;
				}
				router.push({
					url,
					params
				})
			}
			onShow(() => {
				dataLoad.getData();
			})
			return {
				theme,
				getInfoStr,
				goPage,
				...dataLoad,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		position: relative;
		padding: 24rpx;


		.header-bg {
			position: absolute;
			top: 24rpx;
			left: 24rpx;
			width: calc(100% - 24rpx - 24rpx);
			height: 238rpx;
			z-index: 1;
		}

		.header {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: calc(238rpx - 24rpx - 48rpx);
			padding-top: 12rpx;
			padding: 24rpx 24rpx 48rpx;
			top: 0px;

			.name {
				width: auto;
				height: 51rpx;
				font-family: PingFang;
				font-weight: bold;
				font-size: 53rpx;
				color: #ffffff;
				line-height: 111rpx;
			}

			.date {
				width: 206rpx;
				height: 10rpx;
				font-family: PingFang;
				font-weight: 500;
				font-size: 23rpx;
				color: #ffffff;
				line-height: 1rpx;
			}
		}



		.card {
			position: absolute;
			display: flex;
			top: 24rpx;
			width: calc(100% - 24rpx - 24rpx);
			height: 138rpx;
			z-index: 1;
		}

		.menu-1 {
			margin-bottom: 20rpx;
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: calc(138rpx - 24rpx - 24rpx);
			padding-top: 12rpx;
			padding: 24rpx 24rpx;

			color: #000;


			.text1 {
				width: auto;
				font-family: PingFang;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
			}

			.text2 {
				width: auto;
				font-family: PingFang;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
</style>